<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="txt">

    <script>
        var obj = {
            name: "孟浩"
        }

        // 1. 当文本框中内容发生变化的时候， obj.name也要变成对应的内容
        // 通过注册事件就可以实现
        document.querySelector("#txt").oninput = function () {
            //文本框发生变化的时候，触发这个事件
            //在这个事件中更改obj.name为文本框当前的value值
            obj.name = this.value;
        }

        // 2. 当obj.name发生变化的时候，文本框中内容也要对应变化

        // 关键点： 如何知道数据变化了？
        // Object.defineProperty


        

        Object.defineProperty(obj, "name", {
            set: function(value){
                this._name = value;
                // 这个方法一被调用，就证明属性发生变化了
                // 属性一变， html元素就要变
                // 在这里写代码更新html元素就可以达到双向绑定的效果了
                document.querySelector("#txt").value = this._name;
            },
            get: function(){
                return this._name;
            }
        })




        var vm = new Vue({
            el: "#app",
            data: {
                msg: "",
                age: 18
            }
        })
        
        //1. data中的数据是被绑定要页面中的数据吗？
            //不是， 绑定到页面中的数据其实是vm对象中的数据

        
        //vue数据初始化的过程
        //1. 将数据书写在data对象内，data中的数据是没有get和set方法的，也就无法实现双向绑定
        //2. Vue在初始化实例的时候，会把data中所有的数据，用Object.defineProperty方法全部加给vm对象
        //3. 这个时候，vm对象中的数据就有了set和get方法，也就能实现双向绑定了
        //4. 所以在页面中的数据绑定的其实就是 vm 中的数据
    </script>
</body>
</html>